<template>
  <view class="swiper-ads" v-if="adList.length > 0">
    <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" indicator-active-color="#8CB22C"
      previous-margin="56rpx" next-margin="56rpx">
      <swiper-item class="ads-item" v-for="(item, index) in adList" :key="index">
        <!-- <div class="img"></div> -->
        <image class="img" :src="item.url" mode="aspectFill" @tap="handleAdClick(item)" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {
  getBannerListAPI,
} from "@/apis/home";

const adList = ref([])

const getBannerList = () => {
  getBannerListAPI().then((res) => {
    console.log("res", res);
    if (res.code === "200") {
      adList.value = res.data;
    }
  });
};

const handleAdClick = (item) => {
  if (item.type == 1) {
    // 显示富文本内容
    uni.navigateTo({
      url: `/pages/subpackages/mineCenter/rich-text?objectCode=${item.objectCode}`
    })
  } else if (item.type == 2) {
    // 跳转课程卡详情
    uni.navigateTo({
      url: `/pages/subpackages/mineCenter/webview?url=${item.linkUrl}`
    })
  }
}
onMounted(() => {
  getBannerList()
})
</script>

<style lang="scss">
.swiper-ads {
  height: 188rpx;
  overflow: hidden;

  swiper {
    height: 100%;
  }

  .ads-item {
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 605rpx;
      height: 100%;
      background: rgba(green, 0.5);
      border-radius: 12rpx;

    }
  }
}
</style>